<template>
  <div>
    <div style="font-size: large;display: inline-block;font-weight: 800;margin-left: 20px;">请输入需要推荐的菜品数量:</div>&nbsp;&nbsp;&nbsp;
  <el-input-number v-model="num" :min="1" :max="10" label="描述文字">
</el-input-number>
<div style="font-size: large;display: inline-block;font-weight: 800;margin-left: 80px;">请输入需要推荐的总热量(千卡):</div>&nbsp;&nbsp;&nbsp;
<el-input v-model="input" placeholder="请输入内容" style="display: inline-block;width: 200px;"></el-input>
<el-button
    :disabled="isDisabled"
    @click="openFullScreen1"
    v-loading.fullscreen.lock="fullscreenLoading"
    style="margin-left: 70px;">
    开始匹配
  </el-button>

<el-table
:data="tableData"
    show-summary
    style="width: 100%;margin-top: 20px;">
    <el-table-column
      prop="dishName"
      label="菜品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="dishType"
      label="菜品类型">
    </el-table-column>
    <el-table-column
      prop="fat"
      sortable
      label="脂肪(克)">
    </el-table-column>
    <el-table-column
      prop="carbohydrates"
      sortable
      label="碳水化合物(克)">
    </el-table-column>
    <el-table-column
      prop="protein"
      sortable
      label="蛋白质(克)">
    </el-table-column>
    <el-table-column
      prop="heat"
      sortable
      label="热量(千卡)">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">详情</el-button>
          <el-button
          size="mini"
          style="margin-left: 5px;"
          @click="addMenu(scope.row)">加入菜单</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
      return {
        // isDisabled:false,
        num:'',
        input:'' ,
        tableData: [{}],
        fullscreenLoading: false
      };
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },
      openFullScreen1() {
        this.fullscreenLoading = true;
            setTimeout(() => {
              this.fullscreenLoading = false;
          }, 2000);
          if(this.input === '' || parseInt(this.input) > parseInt(this.num) * 500){
            alert('信息填写不正确，请重新填写')
            this.tableData=''
          }else{
            axios.get('/api/dish/matchDish',{
            params:{number:this.num,
            sum:this.input},
            headers:{token:localStorage.getItem('token')}})
          .then(res=>{
            if(res.code===1){
              this.tableData=res.data
              localStorage.setItem('data',JSON.stringify(res.data))
              // this.isDisabled=true
            //   setTimeout(() => {
            //   this.isDisabled = false; // 在一定时间后重新启用按钮
            // }, 30000);
            }else{
              alert(res.msg)
            }
          this.num=1
          }).catch(error=>{
            console.log(error)
          })
          }

      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      },
      handleEdit(row){
        this.$router.push({
          name:'detail',
          params: {
                  dishUrl:row.dishUrl,
                  dishName:row.dishName,
                  fat:row.fat,
                  heat:row.heat,
                  minerals:row.minerals,
                  protein:row.protein,
                  carbohydrates:row.carbohydrates,
                  description:row.description,
                  dishMake:row.dishMakes,
                  dishId:row.dishId,
                  dishType:row.dishType
          }})
      },
      addMenu(row){
      console.log(row.dishId)
      axios.post("/dish/addMenu",{
      dishId:row.dishId,
      dishUrl:row.dishUrl,
      dishName:row.dishName,
      dishType:row.dishType,
      fat:row.fat,
      heat:row.heat,
      protein:row.protein,
      carbohydrates:row.carbohydrates,
      description:row.description,
      username:localStorage.getItem('username')
    },{
      headers:{
        token:localStorage.getItem('token')
      }
    }
    ).then((res)=>{
      alert("添加成功，请前往菜单查看")
    }).catch(error=>{
      console.log(error)
    })
    }
    },
    mounted(){
      this.tableData=JSON.parse(localStorage.getItem('data'));

    },

}
</script>

<style>
 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
